<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="js/vue.global.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            min-width: 1176px;
            min-height: 1200px;
            font-size: 16px;
            margin: auto;
            background-color: #F4F6FA;
            font-weight: 400;
            font-family: Helveticsa, sans-serif;
        }

        #site-headline {
            padding-top: 2rem;
            background-image: linear-gradient(120deg, #b8daee 30%, rgb(29, 140, 252) 46%, #d2d7f8 70%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.6rem;
            font-weight: 600;
            text-align: center;
            letter-spacing: .2rem;
        }

        table {
            width: 1200px;
            background-color: #fff;
            margin: 20px auto;
        }

        tr {
            margin-bottom: 10px;
        }

        td {
            padding: 10px;
            font-size: 16px;
            color: #333;
            border-bottom: 1px dashed #ddd;
        }

        .thead td {
            font-weight: 600;
        }

        .num button {
            width: 1.6rem;
            height: 1.6rem;
            color: #666;
            font-size: 1.4rem;
            text-align: center;
            line-height: 1.6rem;
            border: none;
        }

        .num input {
            height: 1.6rem;
            width: 3rem;
            text-align: center;
            color: #555;
            font-size: .9rem;
            border: 1px solid #ddd;
            position: relative;
            top: -2px;
            outline: none;
        }

        td span {
            color: #999;
            font-size: 13px;
        }

        .price {
            color: red;
            font-weight: 600;
        }

        input[type='checkbox'] {
            margin-right: 5px;
        }

        .del {
            font-weight: 600;
            color: brown;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1 id="site-headline">Vue 购物车结算</h1>
    <div id="app">
        <table>
            <thead>
                <tr class="thead">
                    <td><label><input type="checkbox" @click="selectAll()">全选</label></td>
                    <td colspan="3" align="right">单价(元)</td>
                    <td align="center">数量</td>
                    <td>小计(元)</td>
                    <td style="cursor: pointer; color: skyblue;">编辑</td>
                </tr>
            </thead>
            <tbody>
                <template v-for="(item, index) in shopList">
                    <tr>
                        <td colspan="7">
                            <label>
                                <input type="checkbox" @click="selectShop(item)">
                                {{ item.shop }}
                            </label>
                        </td>
                    </tr>
                    <tr v-for="(goods, i) in item.list">
                        <td><input type="checkbox" v-model="goods.selected"></td>
                        <td style="width: 120px;"><img width="100%" :src="goods.img" alt="" /></td>
                        <td>{{ goods.title }}</td>
                        <td class="price">￥{{ goods.price }}</td>
                        <td class="num">
                            <button @click="decreaseQuantity(goods)">-</button>
                            <input type="text" v-model.number="goods.num">
                            <button @click="increaseQuantity(goods)">+</button>
                        </td>
                        <td class="price">￥{{ (goods.price * goods.num).toFixed(2) }}</td>
                        <td><button @click="deleteSelected(goods)">删除</button></td>
                    </tr>
                </template>
            </tbody>
            <tfoot>
                <tr>
                    <td><label><input type="checkbox" @click="selectAll()">全选</label></td>
                    <td class="del"><button @click="deleteAllSelected()">删除选中商品</button></td>
                    <td>共有 {{ totalItems }} 件商品,已选择 <b>{{ selectedItemsCount }}</b> 件</td>
                    <td align="right" colspan="4">合计： <b class="price" style="font-size: 18px;">￥{{ totalPrice.toFixed(2) }}</b></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        const { createApp } = Vue;

        const app = createApp({
            data() {
                return {
                    shopList: [
                        {
                            shop: 'MEIZU耳机',
                            list: [
                                {
                                    title: 'MEIZU UR 高端定制耳机',
                                    price: 8699,
                                    num: 1,
                                    img: 'img/p1.png',
                                    selected: false
                                },
								{
								    title: '魅族 POP2 高端定制耳机',
								    price: 7699,
								    num: 1,
								    img: 'img/p6.png',
								    selected: false
								}
                            ]
                        },
						{
						    shop: 'MEIZU手机',
						    list: [
						        {
						            title: '魅族 16XS',
						            price: 1699,
						            num: 1,
						            img: 'img/p2.png',
						            selected: false
						        },
								{
								    title: '魅族 16s pro',
								    price: 2699,
								    num: 1,
								    img: 'img/p3.png',
								    selected: false
								},
								{
								    title: '魅族 16T',
								    price: 3699,
								    num: 1,
								    img: 'img/p4.png',
								    selected: false
								},
								{
								    title: '魅族 16T por',
								    price: 4699,
								    num: 1,
								    img: 'img/p5.png',
								    selected: false
								}
						    ]
						}
                    ]
                };
            },
            computed: {
                totalItems() {
                    return this.shopList.reduce((total, shop) => {
                        return total + shop.list.reduce((sum, goods) => sum + goods.num, 0);
                    }, 0);
                },
                selectedItemsCount() {
                    return this.shopList.reduce((total, shop) => {
                        return total + shop.list.reduce((sum, goods) => {
                            return goods.selected? sum + goods.num : sum;
                        }, 0);
                    }, 0);
                },
                totalPrice() {
                    return this.shopList.reduce((total, shop) => {
                        return total + shop.list.reduce((sum, goods) => {
                            return goods.selected? sum + goods.price * goods.num : sum;
                        }, 0);
                    }, 0);
                }
            },
            methods: {
                selectAll() {
                    const isAllSelected = this.shopList.every(shop => shop.list.every(goods => goods.selected));
                    this.shopList.forEach(shop => {
                        shop.list.forEach(goods => {
                            goods.selected =!isAllSelected;
                        });
                    });
                },
                selectShop(shop) {
                    const isShopSelected = shop.list.every(goods => goods.selected);
                    shop.list.forEach(goods => {
                        goods.selected =!isShopSelected;
                    });
                },
                decreaseQuantity(goods) {
                    if (goods.num > 1) {
                        goods.num--;
                    }
                },
                increaseQuantity(goods) {
                    goods.num++;
                },
                deleteSelected(goods) {
                    this.shopList.forEach(shop => {
                        shop.list = shop.list.filter(item => item!== goods);
                    });
                },
                deleteAllSelected() {
                    this.shopList.forEach(shop => {
                        shop.list = shop.list.filter(goods =>!goods.selected);
                    });
                }
            }
        });

        app.mount('#app');
    </script>
</body>

</html>